<script setup lang="ts">
import { Address, IcOrder } from '@/apis/order/sameCityOrder/types'
import SwipeAction from '@/basePackage/pages/deliveryOrder/components/OrderCard/SwipeAction.vue'
import { type PropType, computed, ref, watch } from 'vue'
import computedDistance from '@/utils/computedDistance'
import TipsView from '@/basePackage/pages/deliveryOrder/components/TipsView/TipsView.vue'

const props = defineProps({
    orderItem: {
        type: Object as PropType<IcOrder>,
        default: () => ({}),
    },
    text: {
        type: String,
        default: '请按住滑块，拖动至最右边',
    },
    myLocation: {
        type: Array as unknown as PropType<Address['location']['coordinates']>,
        default: () => [],
    },
    isShowTime: {
        type: Boolean,
        default: false,
    },
})

const SwipeActionRef = ref()
const SwipeActionRefPopup = ref()
const emit = defineEmits(['confirm', 'cancel', 'navigation'])
const confirm = () => {
    showDetail.value = false
    emit('confirm')
}

const navigation = () => {
    showDetail.value = false
    emit('navigation')
}

const callPhone = () => {
    uni.makePhoneCall({
        phoneNumber: props.orderItem.receiver.mobile,
    })
}

const quitTakeOrder = () => {
    // 弹窗确认
    uni.showModal({
        title: '取消订单后将无法配送',
        content: '确认取消吗？',
        success: (res) => {
            if (res.confirm) {
                showDetail.value = false
                emit('cancel')
            }
        },
    })
}

// 计算距离
const distance = computed(() => {
    return computedDistance(props.myLocation, props.orderItem.receiver.location?.coordinates || [])
})
watch(
    () => props.orderItem.status,
    (val) => {
        console.log(val)
        init()
    },
)
const init = () => {
    SwipeActionRef?.value?.init()
    SwipeActionRefPopup?.value?.init()
}

const wtachDetail = () => {
    showDetail.value = true
}
const showDetail = ref(false)
const statusMap = {
    '': '待发货',
    PRICE_PADDING: '待发货',
    PENDING: '待接单',
    TAKEN: '待到店',
    ARRIVED_SHOP: '待取货',
    PICKUP: '配送中',
    DELIVERED: '已送达',
    ERROR: '配送异常',
}
const totalGoodsNum = computed(() => {
    return props.orderItem?.skus?.reduce((total, item) => {
        return total + item.num
    }, 0)
})
</script>

<template>
    <view v-if="orderItem?.receiver" class="order_card" @click="wtachDetail">
        <view class="left_top_number">{{ orderItem.pickupCode }}</view>
        <view class="top fcenter">
            <view class="order_card_title">
                <view class="title">{{ orderItem.receiver.address?.split('~')[1] || '' }}</view>
                <view class="desc">{{ orderItem.receiver.address?.split('~')[0] || '' }}{{ orderItem.receiver.address?.split('~')[2] || '' }}</view>
            </view>
            <view class="location_icon fdc fcenter mla" @click.stop="navigation">
                <view class="icon_container ccenter">
                    <q-icon name="a-zuhe12871" svg size="68rpx"></q-icon>
                </view>
                <view class="distance">{{ distance }}km</view>
            </view>
        </view>
        <view class="center fcenter">
            <view class="cust_info">
                <view class="cust_name">{{ orderItem.receiver.name }} 尾号{{ orderItem.receiver.mobile.slice(-4) }}</view>
                <view v-if="orderItem.remark" class="tips">
                    <TipsView showOneOnly :tips="orderItem.remark"></TipsView>
                </view>
            </view>
            <view class="phone_icon ccenter mla" @click.stop="callPhone">
                <u-icon name="bodadianhua" customPrefix="icon" color="rgb(85, 92, 253)" size="68rpx"></u-icon>
            </view>
        </view>
        <view class="bottom fcenter">
            <u-button v-if="orderItem.status === 'TAKEN'" class="quit_btn" plain @click.stop="quitTakeOrder"> 取消接单 </u-button>
            <SwipeAction
                ref="SwipeActionRef"
                :text="text"
                :isShowTime="isShowTime"
                :uuid="orderItem.id"
                :time="orderItem?.deliverSeconds || 0"
                @success="confirm"
                @click.stop="() => {}"
            >
            </SwipeAction>
        </view>
    </view>
    <u-popup v-model="showDetail" mode="bottom" border-radius="40" appendToBody>
        <view v-if="orderItem?.receiver" class="popup_container">
            <view>
                <view class="top fcenter">
                    <view class="top_left fdc">
                        <view class="top_left_number">{{ orderItem.pickupCode }}</view>
                        <view class="top_left_time">立即送达</view>
                    </view>
                    <view class="top_right mla">{{ statusMap[orderItem.status] }}</view>
                </view>
                <view class="dot_line"></view>
                <view class="center fcenter">
                    <view class="center_left fdc">
                        <view class="cust_name">
                            {{ orderItem.receiver.name }}
                            尾号{{ orderItem.receiver.mobile.slice(-4) }}
                        </view>
                        <view class="fcenter" style="margin-bottom: 18rpx">
                            <view class="title">{{ orderItem.receiver.address?.split('~')[1] || '' }}</view>
                            <view>|</view>
                            <view class="distance">{{ distance }}km</view>
                            <view class="icon_container ccenter" @click.stop="navigation">
                                <u-icon name="dizhi1" customPrefix="icon" size="40rpx" color="#555CFD"></u-icon>
                            </view>
                        </view>
                        <view class="desc"
                            >{{ orderItem.receiver.address?.split('~')[0] || '' }}{{ orderItem.receiver.address?.split('~')[2] || '' }}</view
                        >
                    </view>
                    <view class="center_right fdc fcenter mla">
                        <view class="phone_icon ccenter" @click.stop="callPhone">
                            <u-icon name="bodadianhua" customPrefix="icon" color="rgb(85, 92, 253)" size="68rpx"></u-icon>
                        </view>
                    </view>
                </view>
                <view class="dot_line"></view>
                <view class="bottom">
                    <view class="fcenter title">
                        商品
                        <view class="mla">共{{ totalGoodsNum }}件</view>
                    </view>
                    <view class="goods_list">
                        <view v-for="(item, index) in orderItem.skus" :key="index" class="goods_item">
                            <view class="goods_name">{{ item.productName }}</view>
                            <view class="goods_num">x{{ item.num }}</view>
                        </view>
                    </view>
                    <view v-if="orderItem.remark" class="tips">
                        <TipsView :tips="orderItem.remark"></TipsView>
                    </view>
                </view>
            </view>
            <view class="swipe_action_container">
                <u-button v-if="orderItem.status === 'TAKEN'" class="quit_btn" plain @click.stop="quitTakeOrder"> 取消接单 </u-button>
                <SwipeAction
                    ref="SwipeActionRefPopup"
                    :text="text"
                    :isShowTime="isShowTime"
                    :uuid="orderItem.id"
                    :time="orderItem?.deliverSeconds || 0"
                    @success="confirm"
                >
                </SwipeAction>
            </view>
        </view>
    </u-popup>
</template>

<style lang="scss" scoped>
.order_card {
    border-radius: 16rpx;
    background: #fff;
    margin-bottom: 40rpx;
    padding-top: 60rpx;
    padding-left: 28rpx;
    padding-bottom: 26rpx;
    padding-right: 28rpx;
    position: relative;
    box-shadow: inset 0.8px 0px 0px 0.5px #535bf2;
    // 或者伪类遮盖实现下
    // border: 1px solid #535bf2;
    .left_top_number {
        position: absolute;
        top: 0;
        left: 0;
        width: fit-content;
        padding-left: 12rpx;
        padding-right: 30rpx;
        height: 40rpx;
        line-height: 40rpx;
        background: linear-gradient(104.57deg, rgb(116, 122, 249) 1.051%, rgb(85, 92, 253) 97.782%);
        border-radius: 100rpx 0 250rpx 0rpx;
        color: white;
        font-size: 28rpx;
    }
    .top {
        color: rgb(51, 51, 51);
        margin-bottom: 15rpx;
        .order_card_title {
            margin-right: 65rpx;
            .title {
                font-size: 36rpx;
                font-weight: bold;
                line-height: 40rpx;
                margin-bottom: 13rpx;
            }
            .desc {
                font-family: PingFang SC;
                font-size: 28rpx;
                font-weight: 500;
                line-height: 40rpx;
            }
        }
        .location_icon {
            .icon_container {
                width: 68rpx;
                height: 68rpx;
                // background: rgb(245, 245, 245);
                border-radius: 50%;
            }
            .distance {
                font-size: 24rpx;
            }
        }
    }
    .center {
        border-radius: 20rpx;
        background: rgb(246, 246, 246);
        padding-top: 17rpx;
        padding-left: 25rpx;
        padding-bottom: 18rpx;
        padding-right: 23rpx;
        margin-bottom: 21rpx;
        .cust_info {
            margin-right: 23rpx;
            .cust_name {
                font-size: 28rpx;
                font-weight: bold;
                line-height: 40rpx;
            }
            .tips {
                color: rgb(153, 153, 153);
                font-size: 26rpx;
                font-weight: 400;
            }
        }
    }
}
.quit_btn {
    color: #555cfd;
    flex-shrink: 0;
    // margin-right: 24rpx;
    width: 150rpx;
    &:after {
        border: none;
    }
}
.phone_icon {
    flex-shrink: 0;
    width: 64rpx;
    height: 64rpx;
    // background: rgb(85, 92, 253);
    border-radius: 50%;
}
.popup_container {
    position: relative;
    height: 1000rpx;
    border-radius: 40rpx;
    padding-top: 40rpx;
    padding-left: 28rpx;
    padding-right: 28rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .dot_line {
        border: 1px dashed rgb(153, 153, 153);
        opacity: 0.26;
        margin-top: 38rpx;
        margin-bottom: 34rpx;
    }
    .top {
        .top_left {
            .top_left_number {
                color: rgb(51, 51, 51);
                font-size: 60rpx;
                font-weight: bold;
                margin-bottom: 18rpx;
            }
            .top_left_time {
                color: #333333;
                font-size: 28rpx;
                font-weight: 500;
            }
        }
        .top_right {
            color: rgb(51, 51, 51);
            font-size: 28rpx;
            font-weight: 500;
        }
    }
    .center {
        .center_left {
            color: rgb(51, 51, 51);
            font-size: 28rpx;
            max-width: 580rpx;
            .cust_name {
                margin-bottom: 22rpx;
            }
            .title {
                font-weight: bold;
                margin-right: 10rpx;
                // 一行展示溢出隐藏
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .distance {
                margin-left: 10rpx;
            }
            .icon_container {
                margin-left: 20rpx;
            }
            .desc {
                color: rgb(51, 51, 51);
                font-size: 26rpx;
            }
        }
    }
    .bottom {
        padding-bottom: 150rpx;
        .title {
            color: rgb(51, 51, 51);
            font-size: 32rpx;
            font-weight: bold;
            margin-bottom: 38rpx;
        }
        .goods_list {
            display: flex;
            flex-direction: column;
            margin-bottom: 20rpx;
            .goods_item {
                width: 100%;
                color: rgb(153, 153, 153);
                font-size: 28rpx;
                display: flex;
                align-items: center;
                margin-bottom: 20rpx;
                .goods_name {
                    width: 0;
                    flex: 1;
                    // 一行展示溢出隐藏
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    margin-right: 126rpx;
                }
            }
        }
        .tips {
            color: rgb(51, 51, 51);
            font-size: 28rpx;
            font-weight: bold;
        }
    }

    .swipe_action_container {
        margin-top: auto;
        display: flex;
        align-items: center;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        padding-right: 15rpx;
        padding-bottom: 40rpx;
        padding-top: 10rpx;
        background-color: white;
    }
}
</style>
